<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="clusterDataPoints,ZoomToTheme,addZoomToListener" />
  <title>HERE Maps API Example: Adding 700 Markers on a Map (Clustering)</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="libs/jQl.min.js"></script>
  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-map-container="mapContainer"
    data-params="maps,datarendering"
    data-callback="afterHereMapLoad" >
  </script>
  <script type="text/javascript" src="libs/random-point-generator.js"></script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Adding 700 Markers on a Map (Zoom on Click)</h1>
  <p>700 data points are added to a map.They are clustered and displayed using the standard
    clustering algorthm. The clicking on a cluster will zoom the map to the data points within it.
    Clicking on a noise point will display some text associated with that data point. </p>
  <div id="ticker" style="height: 2.0em; font-size: 2em; color: blue;"></div>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="clustering" type="text/javascript" >
//<![CDATA[
var map,
  pointGenerator;

function ZoomToTheme() {
  var that = this,
    baseTheme = new nokia.maps.clustering.MarkerTheme();
  that.getClusterPresentation = function (dataPoints) {
    var cluster = baseTheme.getClusterPresentation(dataPoints);
    cluster.$boundingBox = dataPoints.getBounds();
    return cluster;
  };
  that.getNoisePresentation = function (dataPoint) {
    var noisePoint = baseTheme.getNoisePresentation(dataPoint);
    noisePoint.$text = dataPoint.text;
    return noisePoint;
  };
}


function addZoomToListener(map) {
  var TOUCH = nokia.maps.dom.Page.browser.touch,
    CLICK = TOUCH ? 'tap' : 'click';
  map.addListener(CLICK, function (evt) {
    if (evt.target.$boundingBox !== undefined) {
      evt.display.zoomTo(evt.target.$boundingBox, false);
      $('#ticker').text('');
    } else if (evt.target.$text !== undefined) {
      $('#ticker').text(evt.target.$text + ' noise point was clicked.');
    }
  });
}

function clusterDataPoints(data) {
  var clusterProvider = new nokia.maps.clustering.ClusterProvider(map, {
    eps: 16,
    minPts: 1,
    dataPoints: data,
    theme : new ZoomToTheme()
  });
  clusterProvider.cluster();

  addZoomToListener(map);
}

function onCoordinatesCreated(data) {
  $('#ticker').text('');
  clusterDataPoints(data);
}

function afterHereMapLoad(theMap) {
  map = theMap;
  map.set('zoomLevel', 2);
  map.set('center', [30, -54]);
  pointGenerator = new randomLocationGenerator(10);
  $('#ticker').text('Generating 7000 Coordinates. Please Wait');
  pointGenerator.createCoordinates(onCoordinatesCreated);

}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>